<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<title>Static Master/Detail Pattern -- Multiple Address Detail example</title>
		<style type="text/css">
			@import "css/app-format.css";
			@import "../../../dijit/themes/claro/claro.css";
		</style>
		<script type="text/javascript" data-dojo-config="parseOnLoad:0,isDebug:1,async:1, mvc: {debugBindings: 1}" src="../../../dojo/dojo.js"></script>
		<script type="text/javascript">
			var ctrl, ctrlDetail, model, data;

			require([
				"doh/runner",
				"dojo/parser",
				"dojo/when",
				"dojo/Stateful",
				"dijit/registry",
				"dojox/mvc/at",
				"dojox/mvc/getStateful",
				"dojox/mvc/ModelRefController",
				"dijit/form/TextBox",
				"dijit/form/Button",
				"dojox/mvc/Group",
				"dojox/mvc/Output"
			], function(doh, parser, when, Stateful, registry, at, getStateful, ModelRefController){

				ctrl = new ModelRefController();
				ctrlDetail = new ModelRefController();

				when(parser.parse(), function(){
					data = {
						"Serial": "360324",
						"First": "John",
						"Last": "Doe",
						"Email": "jdoe@example.com",
						"ShipTo": {
							"Street": "123 Valley Rd-ShipTo",
							"City": "Katonah",
							"State": "NY",
							"Zip": "10536"
						},
						"BillTo": {
							"Street": "17 Skyline Dr-BillTo",
							"City": "Hawthorne",
							"State": "NY",
							"Zip": "10532"
						}
					};

					ctrl.set("model", getStateful(data));
					ctrlDetail.set("model", ctrl.model.get("ShipTo"));

					doh.register("Switch between ShipTo and BillTo", [{
						name: "Switch-to-BillTo",
						runTest: function(){
							ctrlDetail.set("model", ctrl.model.get("BillTo"));
							doh.is("17 Skyline Dr-BillTo", registry.byId("streetInput").get("value"), "Street should be of BillTo");
							doh.is("Hawthorne", registry.byId("cityInput").get("value"), "City should be of BillTo");
						}
					}, {
						name: "Switch-to-ShipTo",
						runTest: function(){
							ctrlDetail.set("model", ctrl.model.get("ShipTo"));
							doh.is("123 Valley Rd-ShipTo", registry.byId("streetInput").get("value"), "Street should be of ShipTo");
							doh.is("Katonah", registry.byId("cityInput").get("value"), "City should be of ShipTo");
						}
					}]);

					doh.register("Setting a plain object to group", [{
						name: "Switch-to-BillTo",
						setUp: function(){
							registry.byId("streetInput").set("value", at("rel:", "Street"));
							registry.byId("cityInput").set("value", at("rel:", "City"));
							registry.byId("stateInput").set("value", at("rel:", "State"));
							registry.byId("zipInput").set("value", at("rel:", "Zip"));
						},
						runTest: function(){
							ctrlDetail.set("model", data.BillTo);
							doh.is("17 Skyline Dr-BillTo", registry.byId("streetInput").get("value"), "Street should be of BillTo");
							doh.is("Hawthorne", registry.byId("cityInput").get("value"), "City should be of BillTo");
						}
					}, {
						name: "Switch-to-ShipTo",
						runTest: function(){
							ctrlDetail.set("model", data.ShipTo);
							doh.is("123 Valley Rd-ShipTo", registry.byId("streetInput").get("value"), "Street should be of ShipTo");
							doh.is("Katonah", registry.byId("cityInput").get("value"), "City should be of ShipTo");
						}
					}]);

					doh.run();
				});
			});	
		</script>
	</head>
	<body class="claro">
		<script type="dojo/require">at: "dojox/mvc/at"</script>
		<div id="wrapper">
		<div id="header">
			<div id="navigation">
			</div>
			<div id="headerInsert">
				<h1>Order Shipping Details</h1>
				<h2>Data Binding Example - Group Container.</h2>
			</div>
		</div>
		<div id="main">
		<div id="leftNav"></div>
		<div id="mainContent">
		<!--
			The group container denotes some logical grouping of widgets and also serves
			to establish a parent data binding context for its children.
			The ref attribute for the outermost container obtains the binding from the
			"page scope" itself.
		-->
		<!--				data-dojo-props="ref: 'model'"> -->
		<!--				data-dojo-props="ref: 'Serial'"/> -->
		<!--		data-dojo-props="ref: 'Last'"/> -->
		<!--		data-dojo-props="ref: 'Email'"/>  -->
		<!-- 		data-dojo-props="value: at('rel:Serial', 'value')"> -->
		<div class="row" data-dojo-type="dojox.mvc.Group" data-dojo-props="target: at(ctrl, 'model')">
			<div class="row">
				<label class="cell" for="serialInput">Order #:</label>
				<input class="cell" id="serialInput" data-dojo-type="dijit.form.TextBox" 
							data-dojo-props="value: at('rel:', 'Serial')">
			</div>
			<div class="row">
				<label class="cell" for="lastnameInput">Last:</label>
				<input class="cell" id="lastnameInput" data-dojo-type="dijit.form.TextBox" 
					data-dojo-props="value: at('rel:', 'Last')">
			</div>
			<div class="row">
				<label class="cell" for="emailInput">Email:</label>
				<input class="cell" id="emailInput" data-dojo-type="dijit.form.TextBox" 
					data-dojo-props="value: at('rel:', 'Email')">
			</div>
		</div>
		<br/>
		<!--
			For convenience, the widget hierarchy matches the data hierarchy
			(see JSON literal above).
			In this implementation, the child ref attributes are simple property names
			of the parent binding context.
			The ref attribute may support more advanced constructs, such as queries
			over the parent widget's or other application specified binding context.
		-->
		<div class="row" id="addrGroup" data-dojo-type="dojox.mvc.Group" data-dojo-props="target: at(ctrlDetail, 'model')">
			<div class="row">
				<label class="cell" for="streetInput">Street:</label>
				<input class="cell" id="streetInput" data-dojo-type="dijit.form.TextBox" 
					data-dojo-props="value: at('rel:', 'Street')">
			</div>
			<div class="row">
				<label class="cell" for="cityInput">City:</label>
				<input class="cell" id="cityInput" data-dojo-type="dijit.form.TextBox" 
					data-dojo-props="value: at('rel:', 'City')">
			</div>
			<div class="row">
				<label class="cell" for="stateInput">State:</label>
				<input class="cell" id="stateInput" data-dojo-type="dijit.form.TextBox" 
					data-dojo-props="value: at('rel:', 'State')">
			</div>
			<div class="row">
				<label class="cell" for="zipInput">Zipcode:</label>
				<input class="cell" id="zipInput" data-dojo-type="dijit.form.TextBox" 
					data-dojo-props="value: at('rel:', 'Zip')">
			</div>
		</div>
		</div></div></div>
	</body>
</html>
